<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div id="dr">
    <div style="float: left">
        <el-button type="primary" @click="dialogFormVisible = true">添加驾驶员</el-button>
        <el-input v-model="text" placeholder="请输入内容" style="width: 200px"></el-input>
        <el-button type="primary" @click="select">搜索</el-button>
    </div>
    <div style="float: right">
        <el-input v-model="name" placeholder="请输入驾驶员名称" style="width: 200px"></el-input>
        <el-input v-model="number" placeholder="请输入驾驶证号" style="width: 200px"></el-input>
        <el-button type="primary" @click="selectNameNumber">搜索</el-button>
    </div>

    <el-dialog title="驾驶员" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="TVehicleDriver">
            <el-form-item label="人员姓名">
                <el-input v-model="TVehicleDriver.driverName"></el-input>
            </el-form-item>
            <el-form-item label="驾驶证号">
                <el-input v-model="TVehicleDriver.driverLicense"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="TVehicleDriver.idCard"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="TVehicleDriver.driverControl"></el-input>
            </el-form-item>
            <el-form-item label="物流公司ID">
                <el-select v-model="TVehicleDriver.logisticsId" placeholder="请选择物流公司">
                    <el-option :value="log.logisticsId" :label="log.logisticsName" v-for="log in TLogistics"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车辆ID">
                <el-select v-model="TVehicleDriver.vehicleId" placeholder="请选择车辆">
                    <el-option :value="car.vehicleId" :label="car.vehicleName" v-for="car in Car"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="TVehicleDriver.driverSex" placeholder="请选择性别">
                    <el-option value="男"></el-option>
                    <el-option value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工龄">
                <el-input v-model="TVehicleDriver.driverAge"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input  type="textarea" v-model="TVehicleDriver.remarks"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDriver">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            :data="TVehicleDrivers"
            style="width: 100%">
        <el-table-column
                label="驾驶员编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverId }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="驾驶员姓名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverName }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="驾驶证号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverLicense }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="身份证号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="性别">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverSex }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="联系方式">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverControl }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="所属物流公司">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.logisticsId }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="负责车辆">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.vehicleId }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="工龄">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.driverAge }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="loadDriver">
    </el-pagination>
</div>
<script>
    new Vue({
        el:"#dr",
        data(){
            return{
                TVehicleDrivers:[],//驾驶员信息
                Car:[],//车辆信息
                TLogistics:[],//物流公司
                total:0,
                pageSize:10,
                current:0,
                text:'',
                name:'',
                number:'',
                TVehicleDriver:{driverId:0,driverName:0,driverLicense:"",idCard:"",driverControl:0,
                                logisticsId:0,vehicleId:0,driverSex:"",driverAge:"",remarks:""},
                dialogFormVisible:false
            }
        },
        methods:{
            loadCar(){
                axios.get("/TVehicleCarDriver")
                    .then(res => {
                        this.Car = res.data;
                    })
            },
            loadTLogistics(){
                axios.get("/TLogisticsDriver")
                    .then(res => {
                        this.TLogistics = res.data;
                    })
            },
            loadDriver(current,pageSize){
                axios.get("/tVehicleDriver/" + current + "/" +pageSize)
                    .then(res => {
                        this.TVehicleDrivers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            select(){
                if(this.text == ''){
                    this.loadDriver(1,10);
                }else {
                    this.loadDriverId(1,10);
                }
            },

            //分页查询编号
            loadDriverId(current,pageSize){
                let driverId = this.text;
                axios.get("/tVehicleDriver/" + current + "/" + pageSize + "/" + driverId)
                    .then(res => {
                        this.TVehicleDrivers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            selectNameNumber(){
                let textName = this.name;
                let textNumber = this.number;
                if(this.name == '') textName = "null";
                if(this.number == '') textNumber = "null";
                this.loadDriverNameNumber(1,10,textName,textNumber);
            },
            //驾驶员名称和驾驶证号分页查询
            loadDriverNameNumber(current,pageSize,name,number){
                axios.get("/tVehicleDriver/" + current + "/" + pageSize + "/" + name + "/" + number)
                    .then(res => {
                        this.TVehicleDrivers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },

            handleEdit(index,row){
                this.TVehicleDriver = JSON.parse(JSON.stringify(row));
                this.dialogFormVisible = true;
            },
            closeDialog(){
                this.TVehicleDriver = {driverId:0,driverName:0,driverLicense:"",idCard:"",driverControl:0,
                    logisticsId:0,vehicleId:0,driverSex:"",driverAge:"",remarks:""};
            },
            handleDelete(index,row){
                 axios.delete("/tVehicleDriver/" + row.driverId)
                    .then(res => {
                        if(res.data = "ok"){
                            this.loadDriver(this.current,this.pageSize);
                        }
                    })
            },
            saveDriver(){
                let driver = JSON.parse(JSON.stringify(this.TVehicleDriver));
                if(driver.driverId == 0){
                    axios.post("/tVehicleDriver",driver)
                        .then(res => {
                            if(res.data = "ok"){
                                this.dialogFormVisible = false;
                                this.loadDriver(this.current,this.pageSize);
                            }
                        })
                }else{
                    axios.put("/tVehicleDriver",driver)
                        .then(res => {
                            if(res.data = "ok"){
                                this.dialogFormVisible = false;
                                this.loadDriver(this.current,this.pageSize);
                            }
                        })
                }
            }
        },
        mounted(){
            this.loadDriver(1,10);
            this.loadCar();
            this.loadTLogistics();
        }
    })
</script>
</body>
</html>